<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Infinite Scroll Example Blog - Infinite Ajax Scroll Example</title>
  <meta name="description" content="An example of an infinite scrolling blog where next articles are automatically appended when you scroll down">

  <link rel="stylesheet" href="css/style.css"/>
</head>
<body>

<div class="surface-container">
  <div class="article" id="article1">
    <h1>Infinite Scroll Example Blog</h1>
    <p class="article__p--first">Rhoncus dolor purus non enim praesent elementum facilisis. Molestie a iaculis at erat pellentesque adipiscing commodo. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Convallis tellus id interdum velit laoreet id donec ultrices tincidunt. Quis commodo odio aenean sed. Turpis massa tincidunt dui ut ornare lectus sit. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci a scelerisque purus semper eget duis. Justo laoreet sit amet cursus sit amet dictum sit amet. Pellentesque dignissim enim sit amet. Enim blandit volutpat maecenas volutpat blandit. Vestibulum rhoncus est pellentesque elit ullamcorper. Est ultricies integer quis auctor elit sed vulputate mi. </p>
    <p>Aliquet lectus proin nibh nisl condimentum id. Amet porttitor eget dolor morbi. In metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae. Sed euismod nisi porta lorem. Vulputate eu scelerisque felis imperdiet proin. </p>

    <figure>
      <img src="https://images.unsplash.com/photo-1462726625343-6a2ab0b9f020?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1400&h=600&fit=crop&s=2cca4c8d60600939766fdc96c1ec0db5">
      <figcaption>Amet porttitor eget dolor morbi.</figcaption>
    </figure>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci a scelerisque purus semper eget duis. Justo laoreet sit amet cursus sit amet dictum sit amet. Pellentesque dignissim enim sit amet. Enim blandit volutpat maecenas volutpat blandit. Vestibulum rhoncus est pellentesque elit ullamcorper. Est ultricies integer quis auctor elit sed vulputate mi. </p>
    <p>Aliquet lectus proin nibh nisl condimentum id. Amet porttitor eget dolor morbi. In metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae. Sed euismod nisi porta lorem. Vulputate eu scelerisque felis imperdiet proin. </p>
  </div>

  <div class="status">
    <div class="loader"></div>
    <div class="no-more">No more pages</div>
  </div>

  <div class="pager">
    <a href="page2.html" class="pager__next">Next article &rightarrow;</a>
  </div>
</div>
<script src="js/index.js"></script>
</body>
</html>
